import {DatePicker, NavBar} from "antd-mobile";
import classNames from "classnames";
import './index.scss';
import {useEffect, useMemo, useState} from "react";
import TwoLineOverview from "@/components/TwoLineOverview";
import _ from "lodash";
import dayjs from "dayjs";
import {useSelector} from "react-redux";
import OneLineOverview from "@/components/OneLineOverview";

const Year = () => {
    const billList = useSelector(state => state.bill.billList)
    // 控制年份选择
    const [visible, setVisible] = useState(false);
    // 年份
    const [date, setDate] = useState(dayjs(new Date()).format('YYYY'));
    // 年份数据
    const [yearBillList, setYearBillList] = useState([]);

    // 按照年份进行分组
    const yearGroup = useMemo(() => {
        return _.groupBy(billList, (item) =>
            dayjs(item.date).format('YYYY')
        )

    }, [billList])

    useEffect(() => {
        const year = dayjs(new Date()).format('YYYY');
        if (yearGroup[year]) {
            setYearBillList(yearGroup[year])
        }
    }, [yearGroup]);

    // 计算年度数据
    const yearResult = useMemo(() => {
        const pay = yearBillList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
        const income = yearBillList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
        return {
            pay,
            income,
            total: pay + income
        }
    }, [yearBillList]);

    // 日期变化时
    const onDateChange = (value) => {
        const currentYear = dayjs(value).format('YYYY');
        setDate(currentYear);
        setVisible(false);
        setYearBillList(yearGroup[currentYear])
    }

    // 对页面数据进行分组
    const monthGroup = useMemo(() => {
        return _.groupBy(yearBillList, (item) =>
            dayjs(item.date).format('YYYY-MM')
        )
    }, [yearBillList])

    const maxMonth = date === dayjs().get('year') ? dayjs().get('month') + 1 : 12
    // 按月统计
    const getMonthResult = () => {
        return new Array(maxMonth).fill('').map((_, index) => {
            let month = index + 1 > 9? `${date}-${index + 1}` : `${date}-0${index + 1}`;
            const monthData = monthGroup[month];
            if (!monthData ||!Array.isArray(monthData)) {
                return {
                    pay: 0,
                    income: 0,
                    total: 0,
                    month
                };
            }
            const pay = monthData.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0) || 0;
            const income = monthData.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0) || 0;
            const total = pay + income;
            return {
                pay,
                income,
                total,
                month
            }
        }).reverse()
    }

    return (
        <div className="billDetail">
            <NavBar className="nav" backArrow={false}>
                <div className="nav-title" onClick={() => setVisible(true)}>
                    {date}年
                    <span className={classNames('arrow')}></span>
                </div>
            </NavBar>
            <DatePicker
                className="kaDate"
                title="记账日期"
                precision="year"
                visible={visible}
                onConfirm={onDateChange}
                max={new Date()}
                onClose={() => {
                    setVisible(false)
                }}
            />

            <div className="content">
                <div className='overview'>
                    {/* 年度统计区域 */}
                    <TwoLineOverview yearResult={yearResult}/>
                </div>
                {/* 月份账单 */}
                {
                    getMonthResult().map(item => {
                        return (
                            <div
                                className="monthBill"
                                key={item.month}
                            >
                                <div className="date">{item.month}月</div>
                                <OneLineOverview key={item.month} monthResult={item}/>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default Year